<template>
  <div>
    <vxe-form :data="formData" :rules="formRules" title-align="right" title-width="100" @submit="submitEvent">
      <vxe-form-item
        title="字典编码"
        field="dictCode"
        span="12"
        :item-render="{name: '$input', props: {type: 'text',placeholder: '请输入字典编码',disabled:disabledSubmit,clearable:true}}"></vxe-form-item>
      <vxe-form-item
        title="描述"
        field="dictDescription"
        span="12"
        :item-render="{name: '$input', props: {type: 'text',placeholder: '请输入描述',disabled:disabledSubmit,clearable:true}}"></vxe-form-item>
      <vxe-form-item
        title="查询语句"
        field="sqlText"
        span="12"
        :item-render="{name: '$textarea', props: {rows:4,disabled:disabledSubmit}}"></vxe-form-item>
      <vxe-form-item
        title="排序"
        field="sortNum"
        span="12"
        :item-render="{name: '$input',props: {type: 'float',placeholder: '请输入数字',disabled:disabledSubmit,clearable:true}}"></vxe-form-item>
      <vxe-form-item align="center" span="24">
        <template #default>
          <vxe-button type="submit" status="primary" :disabled="disabledSubmit">保存</vxe-button>
          <vxe-button type="reset" :disabled="disabledSubmit">重置</vxe-button>
          <!--          <vxe-button @click="$refs.xModal.close()">取消</vxe-button>-->
        </template>
      </vxe-form-item>
    </vxe-form>
  </div>
</template>

<script>
import { addDictMain, editDictMain } from '@/views/system/DataDictManagement/modules/DictAPI'

export default {
  name: 'DictForm',
  components: {},
  props: {
    isModal: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      selectTab: 'tab1',
      iconChooseVisible: false,
      spanSize: 12,
      formData: {},
      formRules: {
        dictCode: [
          { required: true, message: '请输入字典名称' }
        ],
        dictDescription: [
          { required: true, message: '请输入描述' }
        ],
        sortNum: [
          { required: true, message: '请输入排序' }
        ]
      },
      formItems: [],
      fromButtons: {
        align: 'center',
        span: 24,
        titleAlign: 'left',
        itemRender: {
          name: '$buttons',
          children: [{ props: { disabled: false, type: 'submit', content: '保存', status: 'primary' } }, {
            props: {
              disabled: false,
              type: 'reset',
              content: '重置'
            }
          }]
        }
      },
      disabledSubmit: false
    }
  },
  watch: {
    'formData.type' (newValue, oldValue) {
      this.selectType(newValue)
      console.log(this.formData)
    }
  },
  methods: {
    /**
     * 当点击新增按钮时调用此方法
     */
    add (maxSortNum) {
      this.formData = {
        id: null,
        dictCode: '',
        dictDescription: '',
        sqlText: '',
        sortNum: maxSortNum + 1
      }
    },
    edit (row) {
      this.formData = {
        id: row.id,
        dictCode: row.dictCode,
        dictDescription: row.dictDescription,
        sqlText: row.sqlText,
        sortNum: row.sortNum
      }
      console.log('edit', this.formData)
    },
    Detail (row) {
      this.formData = {
        id: row.id,
        dictCode: row.dictCode,
        dictDescription: row.dictDescription,
        sqlText: row.sqlText,
        sortNum: row.sortNum
      }
      console.log('Detail', this.formData)
    },

    // 新增提交
    handleAdd (data) {
      addDictMain(data).then((res) => {
        const resData = res.data
        if (resData.code === 200) {
          console.log('reloadData', this.formData)
          this.$XModal.message({ content: '新增成功', status: 'success' })
          this.$emit('reloadData', this.formData)
        } else if (resData.code >= 400) {
          throw resData
        }
      }).catch((error) => {
        // console.log(error)
        const message = error.response ? error.response.data.message : error.message
        this.$XModal.message({ content: message, status: 'error' })
      })
    },
    // 编辑提交
    handleEdit (data) {
      editDictMain(data).then((res) => {
        const resData = res.data
        if (resData.code === 200) {
          console.log('reloadData', this.formData)
          // console.log('selectRow', this.selectRow)
          this.$XModal.message({ content: '编辑成功', status: 'success' })
          this.$emit('reloadData', this.formData)
        } else if (resData.code >= 400) {
          throw resData
        }
      }).catch((error) => {
        // console.log(error)
        const message = error.response ? error.response.data.message : error.message
        this.$XModal.message({ content: message, status: 'error' })
      })
    },
    // 提交按钮点击事件
    submitEvent () {
      this.$emit('modalControl', { submitLoading: true })

      if (this.isModal === '新增字典') {
        this.handleAdd(this.formData)
      } else if (this.isModal === '编辑字典') {
        this.handleEdit(this.formData)
      }
    }
  }
}
</script>

<style lang='less'>

</style>
